// 扩展vue原有的功能：全局组件，自定义指令，挂载原型方法，注意：没有全局过滤器。
// 这就是插件
// vue2.0插件写法要素：导出一个对象，有install函数，默认传入了Vue构造函数，Vue基础之上扩展
// vue3.0插件写法要素：导出一个对象，有install函数，默认传入了app应用实例，app基础之上扩展
import { useIntersectionObserver } from '@vueuse/core'
import defImg from '@/assets/images/200.png'
// import Message from './Message'
// 自动导入自己封装的组件
const importFn = require.context('./', false, /\.vue$/)
export default {
  install (app) {
    importFn.keys().forEach(v => {
      const com = importFn(v).default
      app.component(com.name, com)
    })

    // 调用自定义指令懒加载函数
    defineDirective(app)

    // 挂在到全局，动态创建消息提示的组件功能
    // app.config.globalProperties.$message = Message// 原型函数
  }
}

// 封装自定义指令懒加载
const defineDirective = (app) => {
  app.directive('lazy', {
    mounted (el, { value }) {
      const { stop } = useIntersectionObserver(
        el,
        ([{ isIntersecting }], observerElement) => {
          if (isIntersecting) {
            el.src = value
            // 当图片地址错误的时候使用自己准备的默认图片
            el.onerror = () => {
              el.src = defImg
            }
            stop()
          }
        }
      )
    }
  })
}
